import 'dart:convert';
import 'dart:async' show Future;
import 'package:flutter/material.dart';
import 'package:flutter/services.dart' show rootBundle;
import 'package:flukit/flukit.dart';

import '../models/country_model.dart';

class SelectAreaCodePage extends StatefulWidget {
  SelectAreaCodePage(this.countryInfo) : super();
  final CountryInfo countryInfo;
  @override
  _SelectAreaCodePageState createState() => _SelectAreaCodePageState();
}

class _SelectAreaCodePageState extends State<SelectAreaCodePage> {

  List<CountryInfo> _countryList = List();
  List<CountryInfo> _hotCountryList = List();

  int _suspensionHeight = 40;
  int _itemHeight = 65;
  String _suspensionTag = "";

  void initState() {
    super.initState();
    _loadJson();
  }

  Future<String> loadAsset() async {
    return await rootBundle.loadString('resource/json/country.json');
  }

  void _loadJson() {
    loadAsset().then((value){
      JsonDecoder decoder = new JsonDecoder();
      List<CountryInfo> newCountryList = List();
      List<CountryInfo> newHotCountryList = List();
      List<dynamic> data = decoder.convert(value);
      data.forEach((value) {
        value['data'].forEach((subValue) {
          CountryInfo countryInfo = CountryInfo(countryName: subValue['countryName'],
              countryPinyin:subValue['countryPinyin'],
              phoneCode:subValue['phoneCode']);
          String tagString = value['key'];
          countryInfo.tagIndex = tagString;
          if (RegExp("[A-Z]").hasMatch(tagString)) {
            newCountryList.add(countryInfo);
          } else {
            newHotCountryList.add(countryInfo);
          }
        });
      });
      setState(() {
        print(newCountryList);
        _hotCountryList = newHotCountryList;
        _countryList = newCountryList;
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    void _onSusTagChanged(String tag) {
      setState(() {
        _suspensionTag = tag;
      });
    }

    Widget _buildSusWidget(String susTag) {
      susTag=(susTag=="★"?"热门国家":susTag);
      return Container(
        height: _suspensionHeight.toDouble(),
        padding: const EdgeInsets.only(left: 15.0),
        color: Color(0xfff3f4f5),
        alignment: Alignment.centerLeft,
        child: Text(
          '$susTag',
          softWrap: false,
          style: TextStyle(
            fontSize: 14.0,
            color: Color(0xff999999),
          ),
        ),
      );
    }

    Widget _buildListItem(CountryInfo model) {
      String susTag=model.getSuspensionTag();
      susTag=(susTag=="★"?"热门国家":susTag);
      return Column(
        children: <Widget>[
          Offstage(
            offstage: model.isShowSuspension != true,
            child: _buildSusWidget(susTag),
          ),
          SizedBox(
            height: _itemHeight.toDouble(),
            child: ListTile(
              title: Text(model.countryName),
              subtitle: Text('+'+model.phoneCode),
              onTap: () {
                Navigator.pop(context, model);
              },
            ),
          )
        ],
      );
    }

    return Scaffold(
      appBar: new AppBar(
        title: const Text('选择国家'),
      ),
      body: Column(
        children: <Widget>[
          Container(
            alignment: Alignment.centerLeft,
            padding: const EdgeInsets.only(left: 15.0),
            height: 50.0,
            child: Text("当前国家: "+widget.countryInfo.countryName),
          ),
          Expanded(
              flex: 1,
              child: QuickSelectListView(
                data: _countryList,
                topData: _hotCountryList,
                itemBuilder: (context, model) => _buildListItem(model),
                suspensionWidget: _buildSusWidget(_suspensionTag),
                isUseRealIndex: true,
                itemHeight: _itemHeight,
                suspensionHeight: _suspensionHeight,
                onSusTagChanged: _onSusTagChanged,
                //showCenterTip: false,
              )
          ),
        ],
      ),
    );
  }
}